<template>
  <div id="quaCer">
<!--    <service-item :title-text="title" :tab="tab">-->
<!--    </service-item>-->
    <el-container>
      <el-aside width="200px">
        <div class="title">
          <h2>资质证照</h2>
        </div>
        <div class="navButton">
          <el-menu
                  default-active='0'
                  class="el-menu-vertical-demo"
                  background-color="#2368ba"
                  text-color="#e7d9d9"
                  active-text-color="#ffd04b">
            <el-menu-item v-for="(item,index) in tab"
                          :index="index.toString()"
                          @click="changeRouter(index)">
              <i class="el-icon-menu"></i>
              <span slot="title" style="font-size: 16px">{{item.cer_name}}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <div class="title-wrapper"><div class="pro">产品详情</div></div>
        <div class="content">

          <div class="pro-box">
            <h1 class="name">{{nowProduct.cer_name}}</h1>
            <div class="money">￥{{nowProduct.cer_price}}</div>
            <el-button type="primary" class="btn" @click="purchase">购买</el-button>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import ServiceItem from "../../components/content/ServiceItem";
  import axios from "axios";
  export default {
    name: "QualificationCertificate",
    components:{
      ServiceItem
    },
    mounted() {
      axios.post('https://haotry.top/api/certificate/showAllCertificate',{},{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        console.log(res)
        if(res.status === 200){
          for(let i=0; i<res.data.length; i++)
          {
            let item = {}
            item = res.data[i]
            this.tab.push(item)
          }
          this.nowProduct = this.tab[0]
        }
        else{
          console.log(res)
        }
      })
    },
    data(){
      return{
        title:'资质证照',
        tab:[],
        nowProduct:{},
        isShow:false,
        form : {}
      }
    },
    methods:{
      changeRouter(index)
      {
        this.nowProduct = this.tab[index]
      },
      purchase(){
        if(sessionStorage.getItem('isLogin') === '0'){
          this.$router.push('/login')
        }
        else if(sessionStorage.getItem('userType') == 'server'){
          alert('您当前登录身份为服务方，无法下单。如需下单请退出系统使用采买方身份登录！')
        }
        else{
          this.form.ber_id = this.$store.getters.getInfo.ber_id
          this.form.or_kind = 2
          this.form.or_product = this.nowProduct.cer_name
          this.form.or_money = this.nowProduct.cer_price
          this.form.ser_id = this.nowProduct.ser_id
          this.form.or_pay = 0
          this.form.or_url = ''
          this.$router.push({
            name:'Pay',
            params:{
              form : this.form
            }
          })
        }
      },
    }
  }
</script>

<style scoped>
  .pro{
    background-color: #ffffff;
    width: 200px;
    height: 40px;
    border-top: 4px solid #0d6eb8;
    color: #0d6eb8;
    font-size: 18px;
    line-height: 40px;
  }
  .content{
    background-color: #ffffff;
    width: 100%;
    display: flex;
    /*height: 600px;*/
  }

  /deep/.el-aside {
    /*background-color: #2368ba;*/
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
    /*line-height: 82px;*/
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
  }
  .title{
    width: 100%;
    height: 100px;
    line-height: 100px;
    border-bottom: 2px solid #0f4984;
    /*background-color: #225793;*/
    color: #2550a7;
  }
  h2,h3{
    margin: 0;
  }
  .pro-box{
    width: 400px;
    height: 300px;
    position: relative;
    background: url("../../assets/images/资质证照.png")no-repeat;
    background-size: 400px 300px;
    margin: 20px auto;
    border-radius: 10px;
    border: 1px solid #c4bebe;
    box-shadow: 0 0 5px #cbc8c8;
  }
  .name{
    height: 80px;
    line-height: 80px;
    width: 80%;
    color: #f1e8e8;
    margin: 0 auto;
  }
  .money{
    /*padding: 40px;*/
    font-size: 30px;
    color: #f30a15;
  }
  .btn{
    width: 200px;
    font-size: 20px;
    margin-top: 50px;
    /*background-color: #3bb2d0;*/
  }
</style>